<!-- 这个页面用来员工加班申请 -->


<template>
    <div>

        <el-divider>当前状态</el-divider>
        <div>
            <el-steps :active="stepActive" :align-center="true">
                <el-step :title="steps[0].title" :description="steps[0].description"></el-step>
                <el-step :title="steps[1].title" :description="steps[0].description"></el-step>
            </el-steps>
        </div>

        <template v-if="stepActive === 2">
            <el-divider>打卡</el-divider>
            <p>您的申请已经通过，请您及时打卡</p>
            <p>加班开始打卡：<span style="color: red;">{{ clockInTime }}</span></p>
            <p>加班结束打卡：<span style="color: red;">{{ clockOutTime }}</span></p>
            <div>
                <el-button type="primary" @click="getOvertimeClockInOrOut('clock_in')">加班开始打卡</el-button>
                <el-button type="warning" @click="getOvertimeClockInOrOut('clock_out')">加班结束打卡</el-button>
            </div>
        </template>


        <el-divider>申请表：{{ currentUserName }}</el-divider>
        <el-form :model="applyForm" label-width="100px" label-position="right">
            <el-form-item label="加班时间范围">
                <el-date-picker type="datetimerange" v-model="applyForm.time" start-placeholder="加班开始时间"
                    end-placeholder="加班结束时间" range-separator="至" style="width: 100%;" :disabled="applyButtonDisabled">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="加班原因">
                <el-input type="textarea" :rows="2" placeholder="请输入加班原因" v-model="applyForm.reason" :disabled="applyButtonDisabled">
                </el-input>
            </el-form-item>
            <div>
                <template v-if="fromManager">
                    <el-button type="primary" @click="setOvertimeConfirmOrReject('approval')" :disabled="approvalButtonDisabled">同意</el-button>
                    <el-button type="warning" @click="setOvertimeConfirmOrReject('reject')" :disabled="approvalButtonDisabled">拒绝</el-button>
                </template>
                <template v-else>
                    <el-button type="primary" @click="overtimeApply" :disabled="applyButtonDisabled">{{ applyButtonMessage }}</el-button>
                </template>
            </div>
        </el-form>
    </div>
</template>

<script>
    /**
     * @author Keven Ge
     * @code 41724180
     */

    import axios from "axios";
    import moment from "moment";

    export default {
        name: "overtimeEmployeeApply",
        props: {
            overtimeId: {
                type: Number,
                default: undefined
            },
            isShow: {
                type: Boolean,
                default: undefined
            },
            fromManager: {
                type: Boolean,
                default: false
            }
        },
        data: function() {
            return {
                applyForm: {
                    time: [],
                    reason: "",
                    status: "0",
                    id: -1
                },
                currentUserName: "",
                clockInTime: "",
                clockOutTime: ""
            }
        },
        computed: {
            /**
             * 获取状态表显示信息
             */
            steps: function() {
                let stepss = []
                if (this.applyForm.status === "0") {
                    stepss = [{
                        title: '未申请',
                        description: '等待提交申请表单'
                    }, {
                        title: '等待中',
                        description: '等待通过审批'
                    }];
                } else if (this.applyForm.status === "1") {
                    stepss = [{
                        title: '已申请',
                        description: '已经提交申请表单'
                    }, {
                        title: '等待审批中',
                        description: '等待通过审批'
                    }];
                } else if (this.applyForm.status === "2") {
                    stepss = [{
                        title: '已申请',
                        description: '已经提交申请表单'
                    }, {
                        title: '已通过',
                        description: '已经通过审批'
                    }];
                } else if (this.applyForm.status === "3") {
                    stepss = [{
                        title: '已申请',
                        description: '已经提交申请表单'
                    }, {
                        title: '已拒绝',
                        description: '已经被拒绝申请'
                    }];
                }
                return stepss
            },

            /**
             * 判定当前完成的步骤
             */
            stepActive: function() {
                if (this.applyForm.status === "0") {
                    return 0;
                } else if (this.applyForm.status === "1") {
                    return 1;
                } else {
                    return 2;
                }
            },

            /**
             * @description 获取规则的开始时间
             */
            get_format_start_time: function() {
                if (this.applyForm.time.length === 0) {
                    return null;
                } else {
                    return moment(this.applyForm.time[0]).format("YYYY-MM-DD HH:mm:ss")
                }
            },

            /**
             * @description 获取规则的结束时间
             */
            get_format_end_time: function() {
                if (this.applyForm.time.length === 0) {
                    return null;
                } else {
                    return moment(this.applyForm.time[1]).format("YYYY-MM-DD HH:mm:ss")
                }
            },

            /**
             * @description 判断是否需要禁止提交表单
             */
            applyButtonDisabled: function() {
                if (this.applyForm.status === "0") {
                    return false;
                } else {
                    return true;
                }
            },

            /**
             * @description 获取Button中显示的信息
             */
            applyButtonMessage: function() {
                if (this.applyForm.status === "0") {
                    return "点击提交申请";
                } else {
                    return "已申请，请在上方查看状态";
                }
            },

            /**
             * @description 经理在审批的时候只有在未审批的状态下，按钮才有效
             */
            approvalButtonDisabled: function() {
                if (this.applyForm.status === "1") {
                    return false;
                } else {
                    return true;
                }
            },

        },
        methods: {
            /**
             * @description 检查表单是否符合提交条件
             */
            checkApplyForm: function() {
                if (this.applyForm.time.length === 0) {
                    this.$message({
                        message: '请检查是否输入日期',
                        type: 'warning'
                    });
                    return false
                }

                if (this.applyForm.reason.length === 0) {
                    this.$message({
                        message: '请检查是否输入原因',
                        type: 'warning'
                    });
                    return false
                }

                return true;
            },

            /**
             * @description 提交表单,提交申请
             */
            overtimeApply: function() {
                if (this.checkApplyForm() === false) {
                    return null;
                }

                var _this = this;
                axios.post("http://127.0.0.1:8000/api/overtime/application/", JSON.stringify({
                        start_time: _this.get_format_start_time,
                        end_time: _this.get_format_end_time,
                        reason: _this.applyForm.reason
                    }))
                    .then(function(response) {
                        console.log(response);
                        if (response.data.status === 0) {
                            _this.$message({
                                message: "提交成功",
                                type: "success"
                            });
                            _this.applyForm.status = "1";
                        } else {
                            _this.$message.error("提交失败");
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    })
            },

            /**
             * @description 根据ID获取这个请假的详细信息
             */
            getApplyForm: function() {

                console.log(this.overtimeId)

                var _this = this;
                axios.get("http://127.0.0.1:8000/api/overtime/id/", {
                        params: {
                            id: _this.overtimeId
                        }
                    })
                    .then(function(response) {
                        console.log(response);
                        if (response.data.status === 0) {
                            _this.applyForm.time = ["", ""];
                            _this.applyForm.time[0] = moment(response.data.data.start_time,
                                "YYYY-MM-DD HH:mm:ss");
                            _this.applyForm.time[1] = moment(response.data.data.end_time, "YYYY-MM-DD HH:mm:ss");
                            _this.applyForm.reason = response.data.data.reason;
                            _this.applyForm.status = response.data.data.status;
                            _this.applyForm.id = response.data.data.id;
                            _this.currentUserName = response.data.data.user_name;
                        } else {
                            _this.$message.error("出现错误");
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    })
            },

            /**
             * @description 经理同意审批或者拒绝
             */
            setOvertimeConfirmOrReject: function(action) {
                var _this = this;
                axios.post("http://127.0.0.1:8000/api/overtime/approval/", JSON.stringify({
                        "id": _this.overtimeId,
                        "result": action
                    }))
                    .then(function(response) {
                        if (response.data.status === 0) {
                            _this.$message({
                                message: action === "approval" ? "审批成功，已允许！" : "审批成功，已拒绝！",
                                type: "success"
                            });
                            _this.$emit("closeOvertimeDetailDialog");
                        } else {
                            _this.$message.error("审批失败，出现错误！")
                        }
                    })
                    .catch(function(error) {})
            },

            /**
             * @description 加班结束打卡
             */
            getOvertimeClockInOrOut: function(action) {
                var _this = this;

                axios.post("http://127.0.0.1:8000/api/overtime/clock/", JSON.stringify({
                        overtime_id: _this.applyForm.id,
                        action: action
                    }))
                    .then(function(response) {
                        if (response.data.status === 0) {
                            _this.$message({
                                message: '恭喜你，加班打卡成功',
                                type: 'success'
                            });
                            _this.getOvertimeClock();
                        } else {
                            _this.$message.error("抱歉，加班打卡失败")
                        }
                    })
                    .catch(function(error) {
                        console.log(error)
                    })
            },

            /**
             * @description 获取本次加班的打卡状态
             */
            getOvertimeClock: function() {
                var _this = this;

                axios.get("http://127.0.0.1:8000/api/overtime/clock/", {
                        params: {
                            id: _this.applyForm.id
                        }
                    })
                    .then(function(response) {
                        if (response.data.status === 0) {
                            _this.clockInTime = response.data.data.clock_in_time;
                            _this.clockOutTime = response.data.data.clock_out_time;
                        }
                    })
                    .catch(function(error) {
                        console.log(error)
                    })
            }
        },
        watch: {

            /**
             * @description 监听父组件向本组件传递的数据，只要当前正在展示，将按照数据更新
             */
            isShow: function() {
                if (this.isShow === true) {
                    console.log("is show is chaned")
                    console.log(this.overtimeId);
                    if (this.overtimeId !== undefined) {
                        console.log(this.overtimeId);
                        this.getApplyForm();
                    } else {
                        console.error("请检查是否正确传递了overtimeID!");
                    }
                }
            }
        },
        mounted: function() {
            this.getOvertimeClock();
            this.currentUserName = this.$store.state.userName;
            if (this.isShow === true && this.overtimeId !== undefined) {
                // console.log(this.overtimeId);
                this.getApplyForm();
            }
        }
    }
</script>

<style>
</style>
